<template>
	<view class="m-input">
		<input :placeholder="placeholder" :disabled="disabled" :value="value" :maxlength="maxlength" :type="inputType" :password="type==='password'? true : false"
		 @input="onInput"></input>
		<slot class="i-btn">

		</slot>
	</view>
</template>

<script>
	export default{
		name:"m-input",
		data(){
			return{

			}
		},
		props:{
			placeholder:String,
			value:String,
			maxlength:String,
			type:String,
			disabled:String


		},
		model: {
		    prop: 'value',
		    event: 'input'
		},
		computed:{
			inputType(){
				if(this.type==='password'){
					return "text"
				}else if(this.type==="account"){
					return "number"
				}else if(this.type==="authCode"){
					return "number"
				}
			}
		},
		methods:{
			onInput(e){
				this.$emit("input",e.target.value)
			}
		}
	}
</script>

<style lang="less" scoped>
	.m-input{
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		// border-bottom: solid 1px rgba(0,0,0,0.2);
		input{
			// box-sizing: border-box;
			font-size: 28rpx;
			padding: 70rpx 20rpx 15rpx 20rpx;
			flex-grow: 1;
			border-bottom: solid 1px rgba(0,0,0,0.2);
		}

	}
</style>
